<template>
  <div :class="['banner-wrapper', status == 1 ? 'online-bg' : 'offline-bg']">
    <div class="top">
      <img v-if="bathVersion == 1" :src="z5Img" alt="" />
      <img v-if="bathVersion == 2" :src="r1Img" alt="" />
      <img v-if="bathVersion == 3" :src="l3Img" alt="" />
      <img v-if="bathVersion == 4" :src="ffImg" alt="" />
    </div>
    <div class="status">状态： {{ currentStatus }}</div>
  </div>
</template>
<script>
import { z5Img, r1Img, l3Img, ffImg } from '@/utils/base64'

export default {
  name: 'Banner-Panel',
  props: {
    bathVersion: Number,
    mode: Number,
    status: Number
  },
  computed: {
    currentStatus() {
      let msg = ''

      if (this.status == 1) {
        if (this.mode == '332') {
          msg = '待机中'
        } else {
          msg = '运行中'
        }
      } else if (this.status == 3) {
        msg = '离线'
      }
      return msg
    }
  },
  data() {
    return {
      z5Img,
      r1Img,
      l3Img,
      ffImg
      // currentStatus: '待机中'
    }
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.online-bg {
  background: linear-gradient(180deg, #0082ff 0%, #00b8ff 100%);
}
.offline-bg {
  background: linear-gradient(180deg, #62728f 0%, #8999b5 100%);
}
.banner-wrapper {
  text-align: center;
  .top {
    padding-top: 37px;
    padding-bottom: 37px;
    height: 78px;
    img {
      width: 225px;
      height: 90px;
    }
  }
  .status {
    color: #fff;
    font-size: 15px;
    padding-bottom: 20px;
  }
}
</style>
